<template>
	<div class="app-container">
		<div style="line-height: 40px; font-weight: 800; font-size: 30px; margin-bottom: 20px">项目执行信息看板</div>
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 项目基本信息
				<span style="float: right">
					<el-button
						type="primary"
						v-if="['yw1', 'sj1', 'gc1', 'cg1', 'cw1', 'jl', 'gc2', 'cg2', 'admin'].some((e) => userStore.$state.roles.includes(e))"
						style="margin-right: 5px"
						@click="toDetail"
						>项目详情</el-button
					><el-button
						type="primary"
						v-if="['yw1', 'sj1', 'jl', 'admin'].some((e) => userStore.$state.roles.includes(e))"
						style="margin-right: 5px"
						@click="toCustom"
						>客户管理主页</el-button
					><el-button
						type="primary"
						v-if="['yw1', 'sj1', 'gc1', 'cw1', 'jl', 'admin', 'gc2'].some((e) => userStore.$state.roles.includes(e))"
						style="margin-right: 5px"
						@click="toProject"
						>项目管理主页</el-button
					>
				</span>
			</div>
			<el-divider style="margin: 15px 0" />
			<div class="info">
				<div class="item">
					<span class="label">业务员</span>
					{{ form.projectBasicVo.nickName }}
				</div>
				<div class="item">
					<span class="label">创建时间</span>
					{{ form.projectBasicVo.createTime }}
				</div>
				<div class="item">
					<span class="label">更新时间</span>
					{{ form.projectBasicVo.updateTime }}
				</div>
				<div class="item">
					<span class="label">项目名称</span>
					{{ form.projectBasicVo.projectName }}
				</div>
				<div class="item">
					<span class="label">项目地址</span>
					{{ form.projectBasicVo.projectAdress }}
				</div>
				<div class="item">
					<span class="label">客户名称</span>
					{{ form.projectBasicVo.customerName }}
				</div>
			</div>
		</div>

		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 项目采购信息
				<span style="float: right">
					<el-button
						type="primary"
						v-if="['yw1', 'sj1', 'cw1', 'jl', 'admin'].some((e) => userStore.$state.roles.includes(e))"
						style="margin-right: 5px"
						@click="toPrice"
						>报价管理主页</el-button
					>
					<el-button
						type="primary"
						v-if="['yw1', 'sj1', 'gc1', 'cg1', 'cw1', 'jl', 'gc2', 'cg2', 'admin'].some((e) => userStore.$state.roles.includes(e))"
						style="margin-right: 5px"
						@click="toBuy"
						>采购管理主页</el-button
					></span
				>
			</div>
			<el-divider style="margin: 15px 0" />
			<div class="info">
				<div class="item">
					<span class="label">合同金额</span>
					{{ form.quotationDataVo.contractAmount }}
				</div>
				<div v-if="['admin', 'yw1', 'jl', 'sj1', 'cw1'].some((e) => userStore.$state.roles.includes(e))" class="item">
					<span class="label">预算成本</span>
					{{ form.quotationDataVo.budgetCost }}
				</div>
				<div v-if="['admin', 'yw1', 'jl', 'sj1', 'cw1'].some((e) => userStore.$state.roles.includes(e))" class="item">
					<span class="label">毛利率</span>
					{{ form.procureDataVo.grossProfitMargin }}%
				</div>
				<div v-if="['admin', 'yw1', 'jl', 'sj1', 'cw1'].some((e) => userStore.$state.roles.includes(e))" class="item">
					<span class="label">执行成本合计</span>
					{{ form.procureDataVo.executionCostSummary }}
				</div>
				<div class="item">
					<span class="label">采购进度</span>
					{{ form.procureDataVo.costRatio }}%
				</div>
				<div v-if="['admin', 'yw1', 'jl', 'sj1', 'cw1'].some((e) => userStore.$state.roles.includes(e))" class="item">
					<span class="label">实际毛利率</span>
					{{ form.procureDataVo.effectiveGrossMargin }}%
				</div>
			</div>

			<div class="table-class" v-if="['admin', 'yw1', 'jl', 'sj1', 'cw1'].some((e) => userStore.$state.roles.includes(e))">
				<div style="width: 150px; line-height: 25px; position: sticky">
					<div class="item-class">&nbsp;</div>
					<div class="item-class">预算成本</div>
					<div class="item-class">合同内成本</div>
					<div class="item-class">有签证成本</div>
					<div class="item-class">无签证成本</div>
					<div class="item-class">执行成本合计</div>
					<div class="item-class">执行成本占比</div>
					<div class="item-class">毛利率</div>
				</div>
				<div style="line-height: 25px" v-for="item in form.procureExecutionDataVos" :key="item">
					<div class="item-class" style="cursor: pointer" @click="openDetail(item)">
						{{ item.procureName }}
					</div>
					<div class="item-class">
						{{ item.budgetCost }}
					</div>
					<div class="item-class">
						{{ item.contract }}
					</div>
					<div class="item-class">
						{{ item.visaCost }}
					</div>
					<div class="item-class">
						{{ item.noCost }}
					</div>
					<div class="item-class">
						{{ Number(item.contract) + Number(item.visaCost) + Number(item.noCost) }}
					</div>
					<div class="item-class">{{ item.percentageExecuteCost }}%</div>
					<div class="item-class">{{ item.grossProfitMargin }}%</div>
				</div>
			</div>
		</div>
		<el-dialog title="报价项详情" v-model="open" width="1400px" append-to-body :close-on-click-modal="false" destroy-on-close>
			<div>
				<div style="font-size: 18px; margin-bottom: 20px">
					实验家具预算成本：{{ selectData.budgetCost
					}}<span style="float: right"
						><el-button size="small" type="primary" style="margin-right: 5px" @click="changeShow(0)">全部</el-button>
						<el-button size="small" type="primary" style="margin-right: 5px" @click="changeShow(1)">合同内成本</el-button
						><el-button size="small" type="primary" style="margin-right: 5px" @click="changeShow(2)">有签证成本</el-button
						><el-button size="small" type="primary" style="margin-right: 5px" @click="changeShow(3)">无签证成本</el-button></span
					>
				</div>
				<div style="margin-bottom: 10px">
					<div>采购记录清单</div>
					<div>
						<div style="overflow-x: auto; height: 400px; overflow-y: auto">
							<div class="item-row" v-for="(item, index) in selectData.projectProcureItemVos" :key="index">
								<div class="item-col">
									分类：
									<el-select disabled v-model="item.itemType" style="width: calc(100% - 100px)" placeholder="请选择">
										<el-option v-for="item in item_type" :key="item.value" :label="item.label" :value="Number(item.value)" />
									</el-select>
								</div>
								<div class="item-col">
									报价单：
									<el-select disabled v-model="item.quotationItemId" style="width: calc(100% - 100px)" placeholder="请选择">
										<el-option v-for="item in quotationList" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</div>
								<div style="width: 300px !important">
									产品分类：
									<el-select disabled v-model="item.productTypeId" style="width: calc(100% - 100px)" placeholder="请选择">
										<el-option v-for="item in productOption" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</div>
								<div class="item-col">
									物品名称：
									<el-input disabled v-model="item.itemName" style="width: calc(100% - 100px)" placeholder="" />
								</div>
								<div class="item-col">
									技术参数：
									<el-input disabled v-model="item.itemParameter" style="width: calc(100% - 100px)" placeholder="" />
								</div>
								<div class="item-col">
									品牌：
									<el-input disabled v-model="item.itemBrand" style="width: calc(100% - 60px)" placeholder="" />
								</div>

								<div class="item-col">
									数量：
									<el-input disabled :controls="false" v-model="item.itemNumber" style="width: calc(100% - 60px)" placeholder="" />
								</div>
								<div class="item-col">
									单价：
									<el-input disabled :controls="false" v-model="item.itemUnitPrice" style="width: calc(100% - 80px)" placeholder="" />元
								</div>
								<div style="width: 300px">
									到货时间：
									<el-date-picker
										disabled
										clearable
										v-model="item.itemArrivalTime"
										style="width: calc(100% - 100px)"
										value-format="YYYY-MM-DD"
										type="date"></el-date-picker>
								</div>
								<div style="flex: 1"></div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<span style="float: left">执行成本合计：{{ selectData.executeCost }}</span
					><span style="float: right">执行成本占比：{{ selectData.percentageExecuteCost }}%</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getExecution, getItem } from '@/api/project/project'

import useUserStore from '@/store/modules/user'
import { getQuotation, getProduct } from '@/api/buy/buy'
const { proxy } = getCurrentInstance()
const { item_type } = proxy.useDict('item_type')
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const form = ref({
	projectBasicVo: {},
	quotationDataVo: {},
	procureDataVo: {},
	procureExecutionDatavos: []
})
if (route.query.id) {
	getExecution(route.query.id).then((res) => {
		form.value = res.data
	})
}

const dataList = ref([])
const selectData = ref({})
const toDetail = () => {
	router.push({
		path: '/project/projectDetail',
		query: { id: route.query.id }
	})
}
const selectItem = (id, type) => {
	getItem({ itemId: id, cost: type }).then((res) => {
		dataList.value = res.data
		if (res.data[0]) {
			selectData.value = res.data[0]
		} else {
			selectData.value = {}
		}
	})
}
const changeShow = (id) => {
	if (dataList.value[id]) {
		selectData.value = dataList.value[id]
	} else {
		selectData.value = {}
	}
}
const toProject = () => {
	router.push({
		path: '/project/projectManage'
	})
}
const toBuy = () => {
	router.push({
		path: '/buy/buy'
	})
}
const toCustom = () => {
	router.push({
		path: '/customer/customerManage'
	})
}
const toPrice = () => {
	router.push({
		path: '/price/priceManage'
	})
}
const open = ref(false)

const nowRow = ref({})
const openDetail = (item) => {
	open.value = true
	nowRow.value = item
	selectItem(item.itemId)
}
const productOption = ref([])
getProduct().then((res) => {
	if (res) productOption.value = filtList(res)
})
const filtList = (data) => {
	let newData = []
	for (let item of data) {
		let obj = { label: `[${item.categoryName}]-${item.typeName}`, value: item.typeId }
		newData.push(obj)
	}
	return newData
}
const quotationList = ref([])

getQuotation(route.query.id).then((res) => {
	quotationList.value = res.map((e) => {
		return {
			label: e.itemName,
			value: e.itemId + ''
		}
	})
})
</script>

<style lang="scss" scoped>
.content {
	margin-bottom: 30px;
	.content-header {
		color: black;
		font-weight: 600;
		margin-bottom: 10px;
		font-size: 16px;
		padding: 0 10px;
	}
	.table-class {
		width: 100%;
		height: 240px;
		background-color: #f2f2f2;
		padding: 20px 5px 10px 5px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-top: 10px;
		display: flex;
		.item-class {
			white-space: nowrap;
			text-align: center;
			border-right: 1px solid rgba(75, 73, 73, 0.768);
			border-bottom: 1px solid rgba(75, 73, 73, 0.768);
			padding: 0 5px;
			min-height: 25.89px;
		}
	}
	.info {
		display: flex;
		flex-wrap: wrap;
		line-height: 40px;
		.item {
			flex: 0 0 33%;
			font-size: 14px;
			.label {
				color: #325e8e;
				background-color: #f2f2f1;
				padding: 5px;
				margin-right: 5px;
			}
		}
	}
}
.item-row {
	width: max-content;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	display: flex;
	.item-col {
		width: 200px;
	}
}
</style>
